<template>
	<view style="position: relative;">
		<view>
			<view style="height: 321rpx;background-color: #00C657;box-sizing: border-box; padding-top: 81rpx; border-radius: 0 0 40rpx 40rpx;">
				<image @click="backTo()" src="/static/waimai/返回@2x.png" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
				<text style="font-size: 34rpx;color: #fff;">确认订单</text>
			</view>
			<view style="width: 690rpx;height: 313rpx;margin: -150rpx 30rpx; box-shadow: 0 0 5rpx 1rpx #999;background-color: #fff;border-radius: 14rpx;">
				<!-- 头部选项卡 -->
				<view class="head-nav">
					<view style="margin: 0 35rpx;" v-for="(item, index) in ps" :class="{ activite: checkIndex === index }" @click="psIndex(index)">
						{{ item }}
						<view class="select"></view>
					</view>
				</view>
				<view v-if="checkIndex === 0">
					<view style="margin: -20rpx 30rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<text style="font-size: 34rpx;color: #1B1B1B;">招港大厦507</text>
						<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
					<view style="font-size: 24rpx;color: #999;margin: 10rpx 30rpx 20rpx;">
						<text>张三</text>
						<text style="margin-left: 15rpx;">13898493923</text>
					</view>
					<view style="margin: 0 30rpx;font-size: 24rpx;">
						<text style="color: #1B1B1B;">立即送出</text>
						<text style="color: #999999;margin-left: 350rpx;">大约11:25送达</text>
						<image src="/static/waimai/返回@2x(1).png" style="margin-left: 15rpx; width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
				</view> 
				<view v-if="checkIndex === 1">
					<view style="margin: -20rpx 30rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<text style="font-size: 34rpx;color: #1B1B1B;">提货点:招港大厦</text>
						<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
					<view style="font-size: 24rpx;color: #999;margin: 10rpx 30rpx 20rpx;">
						<text>张三(先生)</text>
						<text style="margin-left: 15rpx;">13898493923</text>
					</view>
					<view style="margin: 0 30rpx;font-size: 24rpx;">
						<text style="color: #1B1B1B;">提货时间</text>
						<text style="color: #999999;margin-left: 350rpx;">3月12日</text>
						<text style="color: #999999;margin-left: 6rpx;">16:00</text>
						<image src="/static/waimai/返回@2x(1).png" style="margin-left: 15rpx; width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="checkIndex === 2">
					<view style="margin: -20rpx 30rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<text style="font-size: 34rpx;color: #1B1B1B;">招港大厦</text>
						<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
					<view style="font-size: 24rpx;color: #999;margin: 10rpx 30rpx 20rpx;">
						<text>张三(先生)</text>
						<text style="margin-left: 15rpx;">13898493923</text>
					</view>
					<view style="margin: 0 30rpx;font-size: 24rpx;">
						<text style="color: #1B1B1B;">送达时间</text>
						<text style="color: #999999;">(蜂鸟同城配送)</text>
						<text style="color: #999999;margin-left: 190rpx;">大约11:25送达</text>
						<image src="/static/waimai/返回@2x(1).png" style="margin-left: 15rpx; width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;background-color: #f7f7f7;margin-top: 160rpx;"></view>
			<!-- 订单详情 -->
			<view style="font-size: 24rpx;margin: 30rpx;color: #1B1B1B;">
				<text>店铺名称</text>
				<view>
					<view style="display: flex;flex-wrap: nowrap;margin-top: 30rpx;">
						<image src="" style="background-color: #707895; margin-right: 14rpx; border-radius: 10rpx; width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
						<view style="display: flex;flex-direction: column;">
							<text>鲜肉水饺-大份(15个)</text>
							<text style="color: #999; margin: 3rpx 0;">大份(15个)</text>
							<text style="color: #999;">×1</text>
						</view>
						<text style="font-size: 22rpx;margin-top: 70rpx;margin-left: 280rpx;">¥12.5</text>
					</view>
					<view style="display: flex;flex-wrap: nowrap;margin-top: 30rpx;">
						<image src="" style="background-color: #707895; margin-right: 14rpx; border-radius: 10rpx; width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
						<view style="display: flex;flex-direction: column;">
							<text>鲜肉水饺-大份(15个)</text>
							<text style="color: #999; margin: 3rpx 0;">大份(15个)</text>
							<text style="color: #999;">×1</text>
						</view>
						<text style="font-size: 22rpx;margin-top: 70rpx;margin-left: 280rpx;">¥12.5</text>
					</view>
					<view style="font-size: 24rpx;color: #999; display: flex;align-items: center;justify-content: center;margin-top: -150rpx;">
						<text style="margin-right: 4rpx;">展开更多</text>
						<image src="/static/index/返回@2x.png" style="width: 22rpx;" mode="aspectFit"></image>
					</view>
					<view style="margin-top: -170rpx;font-size: 26rpx;color: #1B1B1B;line-height: 60rpx;">
						<view class="dabao">
							<text>打包费</text>
							<text>¥2.5</text>
						</view>
						<view class="dabao">
							<text>配送费</text>
							<view>
								<text style="margin-right: 4rpx; text-decoration: line-through;font-size: 18rpx;color: #999;">¥5.5</text>
								<text>¥2.5</text>
							</view>
						</view>
						<view class="dabao">
							<text>优惠券</text>
							<view>
								<text style="font-size: 22rpx;color: #F61B00;">-¥8</text>
								<image src="/static/index/返回@2x(1).png" style="width: 11rpx;height: 22rpx;margin-left: 8rpx;" mode="aspectFit"></image>
							</view>
						</view>
						<view class="dabao">
							<text>积分抵扣</text>
							<text style="font-size: 22rpx;color: #F61B00;">-¥8</text>
						</view>
						<view style="text-align: right;font-size: 24rpx;">
							<text>已优惠</text>
							<text style="color: #F61B00;">¥2.5</text>
							<text style="margin-left: 15rpx;">小计</text>
							<text style="color: #F61B00;">¥21.53</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;background-color: #F7F7F7;"></view>
			<view style="margin: 0 30rpx;">
				<view class="dabao" style="margin: 30rpx 0;">
					<text>备注</text>
					<view>
						<text style="font-size: 24rpx;">这是一条备注</text>
						<image src="/static/index/返回@2x(1).png" style="width: 11rpx;height: 22rpx;margin-left: 8rpx;" mode="aspectFit"></image>
					</view>
				</view>
				<view class="dabao">
					<text>发票</text>
					<view>
						<text style="font-size: 24rpx;">张三有限公司</text>
						<image src="/static/index/返回@2x(1).png" style="width: 11rpx;height: 22rpx;margin-left: 8rpx;" mode="aspectFit"></image>
					</view>
				</view>
				<text style="font-size: 24rpx;color: #1B1B1B;margin-left: 390rpx;">sx888777878zds878saz4</text>
			</view>
			<view style="display: flex;position: fixed; bottom:0;right:0;background-color: #FFFFFF;">
				<view class="zf" style="flex-direction: column;width: 270rpx;height: 110rpx;">
					<text style="color: #F61B00;font-size: 20rpx;">¥256.23</text>
					<text style="color: #999;font-size: 24rpx;">已优惠¥2.5</text>
				</view>
				<text class="zf" style="font-size: 32rpx;color: #00C657;width: 240rpx;height: 110rpx; background-color: #F5FDF8;">找朋友代付</text>
				<text class="zf" @click="open" style="font-size: 32rpx;color: #fff;width: 240rpx;height: 110rpx; background-color: #00C657;">提交订单</text>
			</view>
			<view style="display: block; width: 100%;height: 150rpx;"></view>
		</view>
		<uni-popup ref="popup" type="top" :mask-click="false">
			<view
				style="display: flex;flex-direction: column; color: #1B1B1B; width: 538rpx;height: 502rpx;border-radius: 24rpx;background-color: #fff;position: absolute;top: 500rpx;left: 106rpx;"
			>
				<image @click="close" src="/static/waimai/错误.png" style="width: 24rpx;height: 23rpx;margin: 35rpx 0 0 480rpx;" mode="aspectFit"></image>
				<text style="font-size: 32rpx;margin: 0 150rpx 89rpx;">请确认收货信息</text>
				<text style="font-size: 26rpx;margin: 0 0 28rpx 39rpx;">收货地址:成都市武侯区205号成都市</text>
				<text style="font-size: 26rpx;margin: 0 0 89rpx 39rpx;">收货人︰张三12345678910</text>
				<navigator url="/pages/pay/pay">
					<button type="default" style="width: 274rpx;height: 72rpx;font-size: 26rpx;border-radius: 36rpx;background-color: #00C657;color: #fff;margin: 0 132rpx 60rpx;">
						确认,立即支付
					</button>
				</navigator>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			checkIndex: 0,
			ps: ['外卖配送', '门店自提', '同城配送'],
			show: false
		};
	},
	methods: {
		psIndex(index) {
			this.checkIndex = index;
		},
		cancel() {
			this.show = false;
		},
		ddan() {
			this.show = true;
		},
		open() {
			this.$refs.popup.open('top');
		},
		close() {
			this.$refs.popup.close();
		}
	}
};
</script>

<style lang="scss">
.zf {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dabao {
	display: flex;
	justify-content: space-between;
}
.select {
	display: none;
	width: 60rpx;
	height: 8rpx;
	background-color: #00c657;
	margin-left: 30rpx;
	border-radius: 4rpx;
}
.activite {
	.select {
		display: block;
		margin-top: 10rpx;
	}
}
.head-nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	font-size: 30rpx;
	color: #666666;
	padding: 57rpx 0rpx;
}
</style>
